<template>
  <!--  -->
  <section class="project">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <ul id="category">
            <template> </template>
            <!-- <li
              @click="changeCategory('21')"
              :class="21 == params.categories ? 'filter-active' : ''"
            >
              All
            </li> -->
            <template v-for="(item, index) in projectCategoryList" :key="index">
              <li
                @click="changeCategory(item.id)"
                :class="item.id == params.categories ? 'filter-active' : ''"
              >
                {{ $wordpressDecodeHTML(item.name) }}
              </li>
            </template>
          </ul>
        </div>
      </div>

      <div class="container">
        <div class="row row-cols-1 row-cols-md-3 g-5">
          <template v-for="(item, index) in result.list" :key="index">
            <div class="col">
              <div class="portfolio-item" @click="jumpDetail(item.id)">
                <img
                  :src="
                    $getImgUrlFromMediaById(item.featured_media_src_url)
                      ? $getImgUrlFromMediaById(item.featured_media_src_url)
                      : require('@/assets/image/blank-profile-picture-973460_640.png')
                  "
                  class=""
                  alt=""
                />
                <div class="portfolio-info">
                  <h3>{{ $wordpressDecodeHTML(item.title.rendered) }}</h3>
                </div>
              </div>
            </div>
          </template>
        </div>
        <!-- 分页 -->
        <div class="row">
          <div class="col-12 d-flex justify-content-center">
            <a-pagination
              v-model:current="params.page"
              v-model:pageSize="params.per_page"
              :total="result.total"
              show-less-items
              @change="onPageChange"
            />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { getArticleList } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";

const { proxy } = getCurrentInstance();

const data = reactive({
  projectCategoryList: computed(() => proxy.$store.getters.projectCategoryList),
  params: {
    page: 1,
    per_page: 12,
    categories: 21,
    // search: computed(() => (proxy.$route.query.keyword ? proxy.$route.query.keyword : "")),
  },
  result: {
    list: [],
    total: 0,
  },
});
const { projectCategoryList, params, result } = toRefs(data);
onBeforeMount(() => {
  if (proxy.$route.params.id) {
    data.params.categories = proxy.$route.params.id;
  }
  methods.getList();
});
onMounted(() => {});
//
const methods = {
  getList() {
    getArticleList(data.params).then((res) => {
      // 获取总数
      let headers = res.headers;
      data.result.total = parseInt(headers["x-wp-total"]);
      //
      data.result.list = res.data;
    });
  },
  onPageChange(pageNumber) {
    data.params.page = pageNumber;
    methods.getList();
  },
  changeCategory(id) {
    data.params.page = 1;
    data.params.categories = id;
    methods.getList();
  },
  jumpDetail(id) {
    proxy.$router.push(`/project/detail/${id}`);
  },
};

const { getList, onPageChange, changeCategory, jumpDetail } = toRefs(methods);
</script>
<style lang="scss" scoped>
section.project {
  padding: 40px 0;

  #category {
    padding: 0;
    margin: 0 0 35px 0;
    list-style: none;
    text-align: center;
  }

  #category li:hover,
  #category li.filter-active {
    border-color: #68a4c4;
    color: #68a4c4;
  }

  #category li {
    cursor: pointer;
    margin: 0 12px 5px 12px;
    display: inline-block;
    padding: 0 4px 6px 4px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 20px;
    color: #444;
    transition: all 0.3s ease-in-out;
    border-bottom: 2px solid #fff;
    font-family: "Roboto", sans-serif;
  }

  .portfolio-item {
    background: #1e4356;
    overflow: hidden;
    min-height: 200px;
    position: relative;
    border-radius: 4px;
    margin: 0 0 30px 0;

    &:hover {
      cursor: pointer;
    }

    img {
      transition: all 0.3s ease-in-out;
      width: 100%;
      height: 200px;
    }

    .portfolio-info {
      opacity: 0;
      position: absolute;
      transition: all 0.3s linear;
      text-align: center;
      top: 10%;
      left: 0;
      right: 0;

      h3 {
        font-size: 22px;
        color: #fff;
        font-weight: bold;
      }
    }
  }

  .portfolio-item:hover img {
    opacity: 0.6;
    transform: scale(1.1);
  }
  .portfolio-item:hover .portfolio-info {
    opacity: 1;
    top: calc(50% - 30px);
  }
}
</style>
